<template>
  <div class="container">
    <el-dialog
      :title="dialogTitle + '联系人'"
      :visible.sync="dialogShow"
      :before-close="dialogClose"
      width="600px"
    >
      <div>
        <el-form ref="form" label-width="100px" :model="form" :rules="formRules">
          <el-form-item label="联系人：" required prop="userName">
            <el-input v-model="form.userName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="联系方式：" required prop="phone">
            <el-input v-model="form.phone" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="type+'地址：'" required prop="interviewAddr">
            <el-input
              v-model="form.interviewAddr"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addContacts, editContacts, oneContacts } from '@/api/personnel'
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    var validateTel = (rule, value, callback) => {
      const tel = /^[0][1-9]{2,3}-[0-9]{5,10}$/
      const phone = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!tel.test(value) && !phone.test(value)) {
        callback(new Error('请输入正确的联系方式'))
      } else {
        callback()
      }
    }
    return {
      dialogTitle: '',
      dialogShow: false,
      submitLoading: false,
      form: {
        companyId: '',
        userName: '',
        phone: '',
        interviewAddr: ''
      },
      formRules: {
        userName: [{ required: true, message: '请输入联系人姓名' }],
        phone: [{ required: true, message: '请输入联系电话' }, { validator: validateTel, trigger: 'blur' }],
        interviewAddr: [{ required: true, message: '请输入面试地址' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'companyId'
    ])
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 提交
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          const form = JSON.parse(JSON.stringify(this.form))
          form.companyId = this.companyId
          if (form.id) {
            form.createTime = ''
            form.updateTime = ''
            editContacts(form).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.submitLoading = false
              this.dialogClose()
            }).catch(err => {
              this.submitLoading = false
            })
          } else {
            addContacts(form).then((res) => {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.submitLoading = false
              this.dialogClose()
            }).catch(err => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    dialogClose() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
      this.dialogShow = false
      this.$emit('refresh')
    },
    show(id, companyId) {
      this.dialogShow = true
      if (id) {
        this.dialogTitle = '编辑'
        oneContacts({
          id: id
        }).then((res) => {
          const data = res.result
          this.form = {
            id: data.id,
            userName: data.userName,
            phone: data.phone,
            companyId: companyId,
            interviewAddr: data.interviewAddr
          }
        })
      } else {
        this.form = {
          companyId: companyId,
          userName: '',
          phone: '',
          interviewAddr: ''
        }
        this.dialogTitle = '新增'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
